<template>
  <div id="app">
    <router-view :fixed="false" class="main"></router-view>
    <!-- 底部tabbar -->
    <van-tabbar active-color="deeppink" route v-show="isShow">
      <van-tabbar-item icon="home-o" :to="{ name: 'Home' }"
        >首页</van-tabbar-item
      >
      <van-tabbar-item icon="fire-o" :to="{ name: 'List' }"
        >列表</van-tabbar-item
      >
      <van-tabbar-item
        icon="shopping-cart-o"
        :to="{ name: 'Cart' }"
        :badge="loadCarsCount ? loadCarsCount : ''"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="friends-o" :to="{ name: 'User' }"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
<script>
// import {mapState,mapActions} from "vuex"
import { mapGetters } from "vuex";
// import {getToken} from "@/utils/auth"

export default {
  data() {
    return {
      isShow: true,
      isLoginState: false,
    };
  },
  created() {
    this.$store.dispatch("cartsCount/getcars");
    this.$store.dispatch("userinfo/getUser");
  },
  computed: {
    ...mapGetters("cartsCount", ["loadCarsCount"]),
    //  ...mapState("cartsCount", ["cartInfo"]),
    //  ishidden:{
    //    get(){
    //      return this.$store.state.ishidden;
    //    },
    //    set(v) {
    //       this.$store.state.ishidden = v;
    //    }
    //  }
  },
  // created(){
  //     this.loadData();
  //     console.log(getToken());
  //     if(getToken()) {
  //       this.isLoginState = true;
  //     } else {
  //        this.isLoginState = false;
  //     }
  // },
  methods: {
    // loadData(){
    //     this.getcars();
    // },
    //  this.$store.cartsCount.dispatch()
    // ...mapActions("cartsCount", {getcars:"getcars"}),
  },
  watch: {
    $route(v) {
      console.log(v);
      if (v.meta.ishidden) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  },
};
</script>

<style>
* {
  box-sizing: border-box;
}
html,
body,
#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  overflow: auto;
}
</style>
